// 创建Vue对象
const app = Vue.createApp({
    delimiters: ["[[", "]]"],
    data() {
        return {
            // v-model
            username: "",
            password: "",
            password2: "",
            mobile: "",
            image_code: "",
            sms_code: "",
            allow: false,
            // v-bind
            image_code_url: "",
            uuid: "",
            sms_code_tip: "获取短信验证码",
            send_flag: false,

            // v-show
            error_name: false,
            error_password: false,
            error_password2: false,
            error_mobile: false,
            error_image_code: "",
            error_sms_code: "",
            error_allow: false,

            // error_message
            error_name_message: "",
            error_password_message: "",
            error_password2_message: "",
            error_mobile_message: "",
            error_image_code_message: "",
            error_sms_code_message: "",
            error_allow_message: "",
        }
    },
    mounted() { // 页面加载完会被调用的
        // 生成图形验证码
        this.generate_image_code();
    },
    methods: {
        // 生成图形验证码的方法：封装的思想，代码的复用
        generate_image_code() {
            this.uuid = generateUUID()
            this.image_code_url = "/image_codes/" + this.uuid + "/";
        },
        // 校验用户名
        check_username() {
            // 用户名正则
            let re = /^[a-zA-Z0-9]{5,20}$/
            if (this.username.match(re)) {
                // 匹配成功，不展示错误信息
                this.error_name = false
            } else {
                // 匹配失败，展示错误信息
                this.error_name_message = '请输入5-20个字符的用户名';
                this.error_name = true;

            }
            console.log("!!!")
            // 判断用户名是否重复注册
            if (this.error_name == false) { // 只有当用户输入的用户名满足条件时才会去判断
                let url = "/usernames/" + this.username + "/count"
                axios.get(url, {
                    responseType: "json"
                }).then((response) => {
                    // console.log(response)
                    console.log(response.data.count)
                    if (response.data.count === 0) {
                        // 用户名不存在
                        this.error_name = false
                    } else {
                        // 用户名已存在
                        this.error_name_message = "用户名已存在"
                        this.error_name = true
                    }

                }).catch(error => {
                    console.log(error.response)
                })
            }

        },
        // 校验密码
        check_password() {
            let re = /[a-zA-Z0-9]{5,20}/
            if (this.password.match(re)) {
                this.error_password = false
            } else {
                this.error_password_message = "请输入5-20个字符的密码"
                this.error_password = true
            }

        },
        // 校验确认密码
        check_password2() {
            if (this.password === this.password2) {
                this.error_password2 = false
            } else {
                this.error_password2_message = "两次密码输入不一致"
                this.error_password2 = true;

            }

        },
        // 校验手机号
        check_mobile() {
            let re = /^1[3-9]{9}/
            if (this.mobile.match(re)) {
                this.error_mobile = false
            } else {
                this.error_mobile_message = "手机号输入错误"
                this.error_mobile = true
            }

        },
        // 校验图形验证码
        check_image_code: function () {
            // if (this.image_code===this.)
            // 不满足4位
            if (this.image_code.length != 4) {
                this.error_image_code_message = "请输入图形验证码"
                this.error_image_code = true
            } else {
                this.error_image_code = false
            }

        },
        // 发送短信验证码
        send_sms_code() {
            // 避免恶意用户频繁的点击获取短信验证码的标签
            if (this.send_flag === true) { // 先判断是否有人上厕所
                return; // 有人正在上厕所，退回去
            }
            this.send_flag = true; // 如果可以进入到厕所，立即关门

            // 校验数据：mobile，image_code
            this.check_mobile();
            this.check_image_code();
            if (this.error_mobile === true || this.error_image_code === true) {
                this.send_flag = false;
                return;
            }
            let url = "/sms_codes/" + this.mobile + "/"
            axios.get(url, {
                params: {
                    uuid: this.uuid,
                    image_code: this.image_code
                },
                headers: {
                    responseType: "json"
                }

            }).then(response => {
                if (response.data.code === "0") {
                    // 展示倒计时60秒效果
                    // setInterval("回掉函数","时间间隔")
                    let num = 60
                    let t = setInterval(() => {
                        if (num === 1) { // 倒计时即将结束
                            // 停止回掉函数的执行
                            // clearInterval("定时器的编号")
                            clearInterval(t);
                            // 还原sms_code_tip的提示文字
                            this.sms_code_tip = "获取短信验证码";
                            // 重新生成图形验证码
                            this.generate_image_code();
                            this.send_flag = false;
                        } else { // 正在倒计时
                            num -= 1; // num=num -1
                            this.sms_code_tip = num + "秒";
                        }

                    }, 1000)
                } else {

                    if (response.data.code === "4001") { // 图形验证码错误
                        this.error_sms_code_message = response.data.errmsg;
                        this.error_sms_code = true;
                        this.send_flag = false;
                    }else {//短信验证码错误 4002
                        this.error_sms_code_message=response.data.errmsg;
                        this.error_sms_code=true;
                        this.send_flag=false
                    }
                    this.send_flag=false;
                }
            }).catch(error => {
                console.log(error.response)
                this.send_flag = false;
            }).finally(
                () => {
                    this.send_flag = false
                }
            )
        },
        // 校验短信验证码
        check_sms_code: function () {
            if (this.sms_code.length != 6) {
                this.error_sms_code_message = "请填写短信验证码"
                this.error_sms_code = true;
            } else {
                this.error_sms_code = false;
            }
        },

        // 校验是否勾选协议
        check_allow() {
            if (this.error_allow) {
                this.error_allow = false
            } else {
                this.error_allow_message = '请勾选协议'
                this.error_allow = true
            }

        },
        // 监听表单提交事件
        on_submit(event) {
            this.check_username()
            this.check_password()
            this.check_password2()
            this.check_mobile()
            this.check_image_code()
            this.check_sms_code();
            this.check_allow()

            // 在校验之后，注册数据中，只要有错误，就禁用掉表单的提交事件
            if (this.error_name == true || this.error_password == true || this.error_password2 == true || this.error_mobile == true, this.error_allow == true || this.check_image_code == true || this.error_sms_code == true) {
                // 禁用掉表单的提交事件
                // window.event.returnValue=false
                event.preventDefault()

            }

        }
    }
})

// 通过ID选择器找到绑定的Html内容
app.mount("#app")